<template>
 <div style=" margin-top:30px">
	 <div class="head"> 
		
			搜索：<el-input v-model="searchValue" style="width: 200px;" placeholder="请输入内容" ></el-input> <el-button icon="el-icon-search" @click="searchUser()" circle></el-button>


		</div>

<center >
<div class="deit">
    <div class="crumbs">
      <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-date"></i> 数据管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="cantainer">
						 <el-table :data="UserList.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" >
													<el-table-column label="全选">
														<el-checkbox ></el-checkbox>
													</el-table-column>
    										 <el-table-column prop="userName" label="用户名" width="180" >
    										 </el-table-column>
    										 <el-table-column prop="loginName" label="登录账号" width="180" >
    										 </el-table-column>
    										 <el-table-column prop="registrationDate" label="注册时间" align="center">
    										 </el-table-column>
													<el-table-column prop="vip" label="是否为vip" align="center">
															 <template slot-scope="scops">
																	<div v-if="scops.row.vip==true">是</div>
																	<div v-else-if="scops.row.vip==false">否</div>
															</template>
    										  </el-table-column>
													<el-table-column prop="balance" label="余额" >
    										  </el-table-column>
													<el-table-column  label="操作" align="center" width="200px">
														  <template slot-scope="scops">
																<el-button type="primary" size="mini" icon="el-icon-edit" @click="UpdateUser(scops.row.id)">编辑</el-button>
																 <el-button type="primary"  size="mini" icon="el-icon-delete"  @click="DeleteUser(scops.row.id,scops.row.userName)">删除</el-button>
														 
																
															</template>
    										  </el-table-column>
    										</el-table>
                   <!-- 分页 -->
									  <el-pagination style="margin-top:20px ;"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[5, 8]" 
                            :page-size="pagesize"        
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="UserList.length">    
                    </el-pagination>
        </div>
    </div>
  </div>




<!--  与上面代码功能一致，只是进行美化
	    <table border="1" cellspacing="0" width="1200px">
	      <thead>
	        <tr>
  								<th>用户名</th>
  								<th>登录账号</th>
  								<th>登录密码</th>
  								<th>注册时间</th>
  								<th>是否为vip</th>
         					<th>余额</th>
         					<th>操作</th>
	          </tr>
	        </thead>
	        <tbody>
	            <tr v-for="item in UserList" :key="item.id">
	              <td >{{item.userName}}</td>
								<td >{{item.loginName}}</td>
								<td >{{item.loginPswd}}</td>
								<td >{{item.registrationDate}}</td>
								<td >{{item.vip}}</td>
								<td >{{item.balance}}</td>
								</v-for>
								<td ><i class="el-icon-delete" @click="DeleteUser(item.id)"></i>
										 <i class="el-icon-edit" @click="UpdateUser(item.id)"></i>
								</td>
	            
              </tr>
							
	        </tbody>
	    </table> -->
			</center>
		
	</div>




</template>

<script>

export default {
	name:"manageUsers",
	data(){
		return{
			searchValue:'',//搜索
			UserList:[{
				id:'',
				userName:'',
				loginName:'',
				loginPswd:'',
				registrationDate:'',
				vip:'',
				balance:''
			}],
			 currentPage:1, //初始页
       pagesize:8,    //    每页的数据
        

		}

	},mounted(){

     
    
		this.getUsers()
	},created() {
        this.handleUserList()
    }
	,methods:{
		getUsers:function(){
			this.$axios.get("/user/getusers").then(
				res=>{
						this.UserList=res.data;
						console.log(this.UserList);
				}
			)
		},
		DeleteUser:function(Deleteid,UserName){
		var admin=localStorage.getItem("admin")
			this.$axios.get("/user/deleteUser",{params:{id:Deleteid,user:UserName,admin:admin}}).then(res=>{
			//进行删除之后的更新页面数据
				this.getUsers()
			if(res.data!=0){
				alert("删除成功")
			}else{
				alert("删除失败")
			}
			})
		},
	UpdateUser:function(updateId){
		console.log(updateId)
		this.$router.push({name:'userUpdate',params:{updateId:updateId}})
		
	},
	searchUser:function(){
		this.$axios.get("/user/search",{params:{search:this.searchValue}}).then(res=>{
			console.log(res)
			this.UserList=res.data
		})
	}
	,
	//分页功能
	handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
        },
        handleUserList() {
            this.$axios.get('http://localhost:8080/BMS/user/getusers').then(res => {  //这是从本地请求的数据接口，
                this.userList = res.body
            })
        }

	}

}
</script>

<style>
 .head{
	position: relative;
	top:-40px;
	text-align: left;

} 
</style>